<!--医嘱信息-->
<script setup lang="ts">

import { CpoeTableData } from "@/interface/doctorStation.ts";
import { cpoeTableList } from "@/views/doctorStation/mockData.ts";
import OpenCpoeDialog from "@/views/doctorStation/component/cpoeTabs/cpoeInfo/openCpoeDialog.vue";


defineOptions({
  name: 'CpoeInfo'
})

const componentList = {
  CpoeSendRecord: defineAsyncComponent(() => import('@/views/doctorStation/component/cpoeTabs/cpoeInfo/tabs/cpoeSendRecord.vue')),
  CpoeCalcPrice: defineAsyncComponent(() => import('@/views/doctorStation/component/cpoeTabs/cpoeInfo/tabs/cpoeCalcPrice.vue')),
  Arrange: defineAsyncComponent(() => import('@/views/doctorStation/component/cpoeTabs/cpoeInfo/tabs/arrange.vue')),
}

const formData = reactive({
  checked1: false,
  checked2: false,
  content: '',
  mode: '',
})

const loading = ref(false);
const tableData = ref<CpoeTableData[]>(cpoeTableList);

// 当前选择的行数据
const currentRow = ref<CpoeTableData | null>(null)

const handleCurrentChange = (row: CpoeTableData | null) => {
  currentRow.value = row
  console.log(`1当前选择的行:`, row)
}

const columns = reactive([
  {
    prop: "effectiveTime",
    label: "生效时间",
    width: "150",
  },
  {
    prop: "medicalAdvice",
    label: "医嘱内容",
    minWidth: "250",
  },
  {
    prop: "skinTest",
    label: "皮试",
    width: "60"
  },
  {
    prop: "totalAmount",
    label: "总量",
    width: "70"
  },
  {
    prop: "singleAmount",
    label: "单量",
    width: "70"
  },
  {
    prop: "frequency",
    label: "频率",
    width: "100"
  },
  {
    prop: "usage",
    label: "用法",
    width: "100"
  },
  {
    prop: "doctorAdvice",
    label: "医生嘱托",
    width: "180"
  },
  {
    prop: "executionTimePlan",
    label: "执行时间方案",
    width: "110",
  },
  {
    prop: "days",
    label: "天数",
    width: "60"
  },
  {
    prop: "executingDepartment",
    label: "执行科室",
    width: "100"
  },
  {
    prop: "orderingDoctor",
    label: "开嘱医生",
    width: "90"
  },
  {
    prop: "doctorCode",
    label: "医生编码",
    width: "150"
  },
  {
    prop: "orderingTime",
    label: "开嘱时间",
    width: "150"
  },
  {
    prop: "sender",
    label: "发送人",
    width: "90"
  },
  {
    prop: "sendTime",
    label: "发送时间",
    width: '150px',
  },
  {
    prop: "nationalCode",
    label: "国家编码",
    width: "200"
  },
  {
    prop: "hospitalApproval",
    label: "医院审批",
    width: "100"
  }
]);

const tabs = reactive([
  {
    name: 'CpoeCalcPrice',
    label: '医嘱计价内容'
  },
  {
    name: 'CpoeSendRecord',
    label: '医嘱发送记录'
  },
  {
    name: 'Arrange',
    label: '安排情况'
  }
])

const activeName = ref('CpoeCalcPrice');
const activeComponent = computed(() => {
  return componentList[activeName.value as keyof typeof componentList]
});

const visible = ref(false);

const openCpoe = () => {
  visible.value = true;
}

</script>

<template>
<div class="cpoeInfo height-100">
  <div>
    <div class="flex ac">
      <el-checkbox v-model="formData.checked1" label="需要报告"></el-checkbox>
      <el-checkbox v-model="formData.checked2" label="不需要报告"></el-checkbox>
      <div class="flex ac ml15">
        <span class="mr5" style="width: 80px">医嘱过滤</span>
        <el-input v-model="formData.content" placeholder="请输入"></el-input>
      </div>
      <span class="ml15">医嘱颜色示例</span>
      <el-radio-group class="ml15" v-model="formData.mode">
        <el-radio value="1">简洁</el-radio>
        <el-radio value="2">完整</el-radio>
      </el-radio-group>
    </div>
    <div class="flex ac mt5">
      <el-button plain type="primary" @click="openCpoe">新开医嘱</el-button>
      <el-button plain type="primary">检查</el-button>
      <el-button plain type="primary">检验</el-button>
      <el-button plain type="primary">修改医嘱</el-button>
      <el-button plain type="primary">删除医嘱</el-button>
      <el-button plain type="primary">医嘱发送</el-button>
      <el-button plain type="primary">医嘱作废</el-button>
      <el-button plain type="primary">医嘱发送回退</el-button>
    </div>
  </div>
  <div class="tableWrap flex flex-column mt10">
    <sTable
      v-loading="loading"
      class="cpoeTable width-100"
      :columns="columns"
      :tableData="tableData"
      :hasPage="true"
      size="small"
      :page="{
      pageNumber: 1,
      pageSize: 10,
      total: 20,
    }"
      @current-change="handleCurrentChange"
    />
    <div class="tabs pt10">
      <el-tabs type="border-card" v-model="activeName">
        <el-tab-pane v-for="item in tabs" :key="item.name" :label="item.label" :name="item.name"></el-tab-pane>
      </el-tabs>
      <component :is="activeComponent"></component>
    </div>
  </div>

  <open-cpoe-dialog v-model="visible"></open-cpoe-dialog>
</div>
</template>

<style scoped lang="scss">
.cpoeInfo {
  .tableWrap {
    height: calc(100% - 42px);
    .cpoeTable {
      height: calc(100% - 200px);
    }
    .tabs {
      height: 200px;
    }
  }
}
</style>
